<template>
    <div class="update-role-container">
        <div class="form-wrapper">
            <h2 class="form-title">编辑角色</h2>

            <el-form :model="form" label-width="120px" class="role-form">
                <el-form-item label="角色名称:">
                    <el-input v-model="form.roleName" placeholder="请输入角色名称" clearable />
                </el-form-item>

                <el-form-item label="选择权限:">
                    <el-checkbox-group v-model="form.pessionName    " class="permission-group">
                        <div class="permission-row">
                            <el-checkbox label="试题管理">试题管理</el-checkbox>
                            <el-checkbox label="考试">考试</el-checkbox>
                        </div>
                        <div class="permission-row">
                            <el-checkbox label="查看成绩">查看成绩</el-checkbox>
                            <el-checkbox label="成绩分析">成绩分析</el-checkbox>
                        </div>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item class="button-group">
                    <el-button type="primary" @click="onSubmit" class="save-btn">修改</el-button>
                    <el-button @click="goBack" class="return-btn">返回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { postinfo, xieInfo } from '@/Http/axiosInfo'

const router = useRouter()
const route = useRoute()

const form = reactive({
    roleId: 0,
    roleName: '',
    pessionName: [] as string[],
    "state": false
})

const loadDetail = () => {
    const roleIdParam = route.query.roleId || route.params.roleId
    if (!roleIdParam) return
    form.roleId = Number(roleIdParam)

    // 根据你的后端调整接口路径与字段
    postinfo.get('/MngRole/GetRoleDetail', {
        params: { roleId: form.roleId }
    })
    .then((res: any) => {
        const data = res?.data?.data || res?.data
        if (Array.isArray(data)) {
            // 兼容数组返回
            const row = data[0] || {}
            form.roleName = row.roleName || ''
            form.pessionName = (row.pessionName || row.pessionName || []) as string[]
        } else if (data) {
            form.roleName = data.roleName || ''
            form.pessionName = (data.pessionName || data.pessionName || []) as string[]
        }
    })
    .catch(() => {
        // 接口未通时，使用示例数据方便你调样式
        form.roleName = '教师'
        form.pessionName = ['试题管理', '成绩分析']
    })
}

//反填角色信息
const feninInfo = () => {
    //拿取角色id
    let roleinfo = route.query.RoleId
 
    
    xieInfo.get('/MngRole/Fening', {
        params: {
            roleId: roleinfo
        }
    })
        .then(res => {
            form.roleId = res.data.data[0].roleId;
            form.pessionName = res.data.data[0].pessionName
            form.roleName = res.data.data[0].roleName;
         
           
    })
}

onMounted(() => {
    feninInfo()
})

const onSubmit = () => {
    if (!form.roleName.trim()) {
        ElMessage.error('请输入角色名称')
        return
    }
    if (form.pessionName.length === 0) {
        ElMessage.error('请至少选择一个权限')
        return
    }

    xieInfo.put('/MngRole/UpdateRole', {
        roleId: form.roleId,
        roleName: form.roleName,
        pessionName: form.pessionName,
    })
    .then((res: any) => {
        if (res?.data?.code === 300 || res?.status === 300) {
            ElMessage.success('更新成功')
            router.back()
        } else {
            ElMessage.error(res?.data?.message || '更新失败')
        }
    })
    .catch((err: any) => {
        ElMessage.error(err?.response?.data?.message || err?.message || '请求失败')
    })
}

const goBack = () => {
    router.push('/GetRole')
}
onMounted(() => {
    loadDetail()
})
</script>

<style scoped>
.update-role-container {
    min-height: 100vh;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.form-wrapper {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 600px;
    position: relative;
}

.form-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #8B4513;
    border-radius: 4px 0 0 4px;
}

.form-title {
    font-size: 32px;
    font-weight: 800;
    color: #333;
    margin: 0 0 30px 0;
    text-align: center;
}

.role-form { width: 100%; }
.permission-group { width: 100%; }

.permission-row {
    display: flex;
    gap: 30px;
    margin-bottom: 15px;
}

.button-group {
    margin-top: 40px;
    display: flex;
    gap: 15px;
    justify-content: center;
}

.save-btn,
.return-btn {
    padding: 12px 24px;
    font-size: 14px;
    border-radius: 6px;
    min-width: 120px;
}
</style>


